<template>
    <div class="newer-guide">
        <!-- 新手指南 -->
        <div class="deposit-content">
            <div class="top-bg">
                <van-nav-bar class="header" fixed :border="false" @click-left="diffBack">
                        <div class="left"
                            slot="left">
                            <van-icon name="arrow-left"
                                    size="24px"
                                    color="#fff" />
                        </div>
                        <div class="title"
                            slot="title">{{title}}</div>
                    </van-nav-bar>
            </div>
            <div class="reset-wrapper">
                <div class="reset-content">
                    <div class="each-rule">
                        <div class="title-case">一、什么是图小助？</div>
                        <div class="content-case">
                            <div class="pure-words">图小助是首家专门提供上门制作效果图服务O2O平台！ 站在互联网的肩膀上改变传统效果图行业的运作模式， 专业服务于设计师，也为曾经沉浮在传统效果图公司 的表现师打造专属于你们的平台！</div>
                        </div>
                    </div>
                    <div class="each-rule">
                        <div class="title-case">二、注册及登录？</div>
                        <div class="content-case">                    
                            <!-- 每个规则 多个 -->
                            <div class="words-img">
                                <div class="left-case">
                                    <div class="left-content">
                                        <div class="sub-content">
                                            <div class="font-bold">注册：</div>
                                            <div>通过手机号验证码进行快捷注册</div>
                                        </div>
                                        <div class="sub-content">
                                            <div class="font-bold">登录：</div>
                                            <div><span>1. </span>通过手机号码验证码快捷登录</div>
                                            <div><span>2. </span>通过手机号密码登录</div>
                                            <div><span>3. </span>通过第三方软件快捷登录</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="right-case">
                                    <div class="img-detail"><img src="@/assets/img/performance/personalCenter/twoRule.png" alt=""></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="each-rule">
                        <div class="title-case">三、设计师如何挑选合适的表现师？</div>
                        <div class="content-case">
                            <!-- 每个规则 多个 -->
                            <div class="words-img">
                                <div class="left-case">
                                    <div class="left-content">
                                        <div class="sub-content">1.可直接在首界面下滑浏览所有 的表现师</div>
                                    </div>
                                </div>
                                <div class="right-case">
                                    <div class="img-detail"><img src="@/assets/img/performance/personalCenter/threeRule1.png" alt=""></div>
                                </div>
                            </div>
                            <div class="words-img">
                                <div class="left-case">
                                    <div class="img-detail"><img src="@/assets/img/performance/personalCenter/threeRule2.png" alt=""></div>
                                </div>
                                <div class="right-case">
                                    <div class="right-content">2.可选中某个表现师查看他的信 息、作品、评价、收费</div>
                                </div>
                            </div>
                            <div class="words-img">
                                <div class="left-case">
                                    <div class="left-content">3.选好图的数量和日期之后， 页面会直接显示出需预付的费 用，可直接点击下一步</div>
                                </div>
                                <div class="right-case">
                                    <div class="img-detail"><img src="@/assets/img/performance/personalCenter/threeRule3.png" alt=""></div>
                                </div>
                            </div>
                            <div class="words-img">
                                <div class="left-case">
                                    <div class="img-detail"><img src="@/assets/img/performance/personalCenter/threeRule4.png" alt=""></div>
                                </div>
                                <div class="right-case">
                                    <div class="right-content">4.填写订单的详情即可，选择联 系方式和上门地址、“上门时间” “项目名称”“需求效果”“支付方 式”</div>
                                </div>
                            </div>
                            <div class="words-img">
                                <div class="mid-case">5.填写订单详情、付款后会显示“已成功预约”，系统会 自动生成一个项目组，项目组中包括您本人、为您服务 的表现师、和您的专属客服！有任何需求和问题都可在 项目组中沟通！</div>
                            </div>
                        </div>
                    </div>
                    <div class="each-rule">
                        <div class="title-case">四、在图小助平台作图怎样收费？</div>
                        <div class="content-case">
                            <div class="pure-words">
                                <div>1.画图费用：图小助平台采用新的收费模式-“按时 计费”绝对透明合理~按照表现师的作图水平制定每 个人的“时价”，付款方式为：预付款+尾款；预付 款为该表现师的时价*6小时（上门服务最低收费）； 若您的图在6小时内即可完成，则尾款为0元！ 若您的图完成时间超出6小时，尾款即为超出的小 时数*时价；</div>
                                <div style="color: #F3A46C;">【注：计费时间不包含渲染时间、上门最初交流效果图要什么样式的时间】</div>
                                <div>改图费用：改图费用需在项目组中讲明改图需求， 由改图客服给出合理报价，双方接受后即可支付 并开始改图！</div>
                            </div>
                        </div>
                    </div>
                    <div class="each-rule">
                        <div class="title-case">五、设计师想要改图该怎么操作</div>
                        <div class="content-case">
                            <!-- 每个规则 多个 -->
                            <div class="words-img">
                                <div class="left-case">
                                    <div class="left-content">
                                        <div class="sub-content">在订单列表中找到你需要改图 的那个项目组，点击“请求改 图”，系统会自动为您分配一 位优秀的改图师和您的专属改 图客服进入项目组，在项目组 中可与改图客服和改图师讲明 您的改图需求，由改图客服给 出合理报价，协商好后由改图 客服发出您需付款的金额，支 付成功后生成您的改图订单， 开始为您改图</div>
                                    </div>
                                   </div>
                                <div class="right-case">
                                    <div class="img-detail" style="margin-top: 50%;"><img src="@/assets/img/performance/personalCenter/fiveRule.png" alt=""></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="each-rule">
                        <div class="title-case">六、如何成为平台上的表现师？</div>
                        <div class="content-case">
                            <!-- 每个规则 多个 -->
                            <div class="words-img">
                                <div class="left-case">
                                    <div class="left-content">
                                        <div class="sub-content">1.可通过各大招聘网站上搜索 “图小助”，私信联系人事mm、 或者直接投递简历+作品至平 台邮箱，我们会尽快约您面试！</div>
                                        <div class="sub-content"> 2.也可在App中“我的”--“申请 入驻为表现师”</div>
                                    </div>
                                </div>
                                <div class="right-case">
                                    <div class="img-detail"><img src="@/assets/img/performance/personalCenter/sixRule.png" alt=""></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>    
            </div>
      </div>
    </div>
</template>
<script>
export default {
  components: {
  },
  data() {
    return {
      title: '新手指南',
    }
  },
  created() {
  },
  methods: {
      diffBack(){
        this.$router.push('/designer/myInfo')
      }
  }
};
</script>
<style lang="scss" scoped>
.newer-guide {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #F9F9F9;
    p{
        margin-bottom: 0.3rem!important;
    }
    .deposit-content{
        position: relative;
        width: 100%;
        height: 100%;
        .top-bg{
            width: 100%;
            background: #fff;
            border-bottom-left-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
            .header {
                background: #5E8EFE;
                color: #ffffff;
                height: 0.92rem;
                line-height: 0.92rem;
                .title {
                    color: #ffffff;
                    font-size: 0.35rem;
                    }
            }
        }
        .reset-wrapper{
            position: fixed;
            margin: 0.24rem;
            width: calc(100% - 0.48rem);
            height: calc(100% - 1.4rem);
            top: 0.92rem;
            left: 0;
            right: 0;
            overflow-y: scroll;
            bottom: 0.48rem;
            .reset-content{
                box-sizing: border-box;
                width: 100%;
                .each-rule{
                    background: #fff;
                    margin-bottom: 0.24rem;
                    padding: 0.4rem;
                    box-sizing: border-box;
                    width: 100%;
                    border-radius: 0.1rem;
                    .title-case{
                        color: #292B38;
                        font-size: 0.28rem;
                        font-family: PingFang-SC-Bold;
                        font-weight: bold;
                        margin-bottom: 0.15rem;
                    }
                    .content-case{
                        color: #868998;
                        font-size: 0.26rem;
                        font-family: PingFang-SC-Medium;
                        font-weight: 500;
                        line-height: 0.37rem;
                        .pure-words{
                            div{
                                margin-bottom: 0.24rem;
                            }
                        }
                        .words-img{
                            width: 100%;
                            margin-bottom: 0.4rem;
                           .left-case{
                               display: inline-block;
                               .left-content{
                                   width: 3.5rem;
                                   margin-right: 0.3rem;
                                   .sub-content{
                                       color: #868998;
                                       font-size: 0.26rem;
                                       font-family: PingFang-SC-Medium;
                                       font-weight: 500;
                                       line-height: 0.37rem;
                                       margin-bottom: 0.24rem;
                                       .font-bold{
                                           color: #292B38;
                                           font-family: PingFang-SC-Medium;
                                           font-weight: 500;
                                       }
                                       span{
                                           color: #5E8EFE;
                                       }
                                   }
                               }
                               .img-detail{
                                   width: 2.2rem;
                                   img{
                                       width: 2.2rem;
                                   }
                               }
                           } 
                           .right-case{
                               display: inline-block;
                               vertical-align: top;
                               .right-content{
                                   width: 3.5rem;
                                   margin-left: 0.3rem;
                                   .sub-content{
                                       color: #868998;
                                       font-size: 0.26rem;
                                       font-family: PingFang-SC-Medium;
                                       font-weight: 500;
                                       line-height: 0.37rem;
                                       margin-bottom: 0.24rem;
                                       .font-bold{
                                           color: #292B38;
                                           font-family: PingFang-SC-Medium;
                                           font-weight: 500;
                                       }
                                       span{
                                           color: #5E8EFE;
                                       }
                                   }
                               }
                               .img-detail{
                                   width: 2.2rem;
                                   img{
                                       width: 2.2rem;
                                   }
                               }
                           }
                           .mid-case{
                               color: #868998;
                               font-size: 0.26rem;
                               font-family: PingFang-SC-Medium;
                               font-weight: 500;
                               line-height: 0.37rem;
                           }
                        }
                    }
                }
            }
        }
    }
}
</style>
